<!DOCTYPE html>
<html>

<head>
    <meta charset='utf-8'>
    <title>JS-XLSX Demo</title>
    <!-- use version 0.20.3 -->
    <!-- <script lang="javascript" src="https://cdn.sheetjs.com/xlsx-0.20.3/package/dist/xlsx.full.min.js"></script> -->

    <script type="text/javascript" src='./xlsx.full.min.js'></script>
</head>

<body>

    <table id="data-table" border="1" width="50%">
        <tbody>
            <tr>
                <td>编号</td>
                <td>名称</td>
                <td>价格</td>
                <td>日期</td>
            </tr>
            <tr>
                <td>1</td>
                <td>《Java架构师》</td>
                <td>￥78.5</td>
                <td>2018-10-11</td>
            </tr>
            <tr>
                <td>2</td>
                <td>《Python入门到精通》</td>
                <td>￥65.3</td>
                <td>2019-03-22</td>
            </tr>
            <tr>
                <td>3</td>
                <td>《JavaScript高级教程》</td>
                <td>￥89.4</td>
                <td>2017-04-13</td>
            </tr>
        </tbody>
    </table>

    <p>
        将上面表格的内容导出到Excel文件
    </p>
    <p>
        <button onclick="exportExcel()">导出Excel</button>
        <button onclick="noDomExportExcel()">不操作dom导出Excel</button>
    </p>

    <script type="text/javascript">

        function exportExcel() {
            // 获取表格的Dom对象
            var elt = document.getElementById('data-table');

            // 创建Excel工作簿，即一个Excel文件
            var wb = XLSX.utils.table_to_book(elt, {
                sheet: "SheetJS" // 工作表格名称
            });

            // 导出工作表
            return XLSX.writeFile(wb, 'SheetJSTableExport.xlsx');
        }

        function exportExcel2() {
            // 获取表格的Dom对象
            var elt1 = document.getElementById('xgszjcb-tb');
            var elt2 = document.getElementById('xqzjcbxtscb-tb');
            var elt3 = document.getElementById('xqzjcbdrb-tb');
            var elt4 = document.getElementById('xgszjsr-tb');

            // 创建虚拟workbook
            var wb = XLSX.utils.book_new();

            // 把数据生成sheet
            var sheet1 = XLSX.utils.table_to_sheet(elt1);
            var sheet2 = XLSX.utils.table_to_sheet(elt2);
            var sheet3 = XLSX.utils.table_to_sheet(elt3);
            var sheet4 = XLSX.utils.table_to_sheet(elt4);

            // 把sheet添加到workbook里
            XLSX.utils.book_append_sheet(wb, sheet1, "县区直接成本-合计");
            XLSX.utils.book_append_sheet(wb, sheet2, "县区直接成本-系统生成");
            XLSX.utils.book_append_sheet(wb, sheet3, "县区直接成本-导入");
            XLSX.utils.book_append_sheet(wb, sheet4, "县区直接收入-合计");

            // 导出工作表
            return XLSX.writeFile(wb, '县区公司.xlsx');
        }



        //不操作dom导出Excel
        function noDomExportExcel() {
            console.log('000000000');
            // 使用 XLSX.utils.aoa_to_sheet(excleData);
            const excleData = [
                ['周一', '周二', '周三', '周四', '周五'],
                ['语文', '数学', '历史', '政治', '英语'],
                ['数学', '数学', '政治', '英语', '英语'],
                ['政治', '英语', '历史', '政治', '数学'],
            ];


            // 使用 XLSX.utils.json_to_sheet(excleData);
            // const excleData = [
            //     { 周一: '语文', 周二: '数学', 周三: '历史', 周四: '政治', 周五: '英语' },
            //     { 周一: '数学', 周二: '数学', 周三: '政治', 周四: '英语', 周五: '英语' },
            //     { 周一: '政治', 周二: '英语', 周三: '历史', 周四: '政治', 周五: '数学' },
            // ];

            // 设置表格样式，!cols为列宽
            const options = {
                '!cols': [
                    { wpx: 100 },
                    { wpx: 100 },
                    { wpx: 100 },
                    { wpx: 100 },
                    { wpx: 100 },
                ]
            };

            // 制作工作表的方式有很多种，以数组和对象为例
            // const worksheet: XLSX.WorkSheet = XLSX.utils.aoa_to_sheet(excleData);
            // const worksheet: XLSX.WorkSheet = XLSX.utils.json_to_sheet(excleData);
            // const worksheet = XLSX.utils.json_to_sheet(excleData);
            const worksheet = XLSX.utils.aoa_to_sheet(excleData);

            // 使用指定的单元格作为起点插入数据，r：行， c：列，详情看官网文档
            // XLSX.utils.sheet_add_aoa(worksheet, [[“数学”，“语文”], [“政治”，“语文”], [“历史”，“政治”], ], {origin: {r: 2, c: 5}});
            worksheet['!cols'] = options['!cols'];  // 设置每列的列宽，10代表10个字符，注意中文占2个字符
            worksheet['!merges'] = [{ e: { c: 1, r: 1 }, s: { c: 0, r: 0 } }];
            console.log('workshe', worksheet['!merges']);



            // 新建一个工作簿
            // const workbook: XLSX.WorkBook = XLSX.utils.book_new();
            const workbook = XLSX.utils.book_new();//创建虚拟workbook
            console.log('workbook: ', workbook);

            /* 将工作表添加到工作簿,生成xlsx文件(book,sheet数据,sheet命名)*/
            XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');
            /* 输出工作表， 由文件名决定的输出格式(book,xlsx文件名称)*/
            XLSX.writeFile(workbook, '排庭表.xlsx');
        }
    </script>
</body>

</html>